{% extends "home/home.html" %}
{% load i18n %}

{% block head_title%}Ejemplares Disponibles{% endblock %}

{% block javascript %}
<!--<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-2.0.3.js"></script>-->
<script src="{{STATIC_URL}}js/jquery.nivo.slider.js" type="text/javascript"></script>

<script  type="text/javascript">
$(document).ready(function(){	
	$("#ave").on('click', Items);
	function Items(){
		console.log("HOLA ");
		var id = $(this).data("id");
		$.ajax({
		 	 data : {'id':id},
		 	 url : '/catalog/cart/cart-ajax/',
		 	 type: 'get',
		 	 success: function(data){
		 	 console.log(data);		 	
		 	 }	 
		 	 });
		
		console.log(id);}
	});		
</script>
{% endblock %}

{% block content %}
	 <div id="content">
      <!--Breadcrumb Part Start-->
      <div class="breadcrumb"> <a href="{% url 'catalog_base' %}">Especies</a> &raquo; 
                               <a href="{% url 'subspecies' Specie.id %}">SubEspecies</a></div>
      <!--Breadcrumb Part End-->
      
      <h1>{{Subspecie.name}}</h1>
      <h2>Ejemplares Disponibles:</h2>
      
        {% for bird in Birds %}
          
         <div class="product-list">
             <div>
               <div class="left">
               
                 <div class="image"><a href="">
                     <img src="{{MEDIA_URL}}{{bird.image}}" title="" alt="" height="172" width="172"/></a></div>
                 <div class="name"><a href=""><h3>{{bird.mutation}}</h3></a></div>
                <!--   <div class="description"> {{bird.details}}</div> -->
                 <div class="price"> <span class="price-new">{{bird.price}}€</span> <br></div>
                 <div class="cart">
                     <a id= "ave" href="{% url 'apps.catalog.views.add_to_cart'  bird.id  1  %}"><input type="button" class="button" value="Añadir al Carro"> </a>   <br>          
                 </div>
                 <div class="name"><a href="{% url 'detail_bird' bird.id %}"><h4>Mostrar Detalles</h4></a></div>
               </div>
             </div> 
         </div>
         {% endfor %}
     </div>
{% endblock %}